<template>
  <div>
    <div v-loading="pageLoading" element-loading-text="等待支付中..." class="container mt-4">

      <div class="row">
        <div class="col-md-6 mb-3">
          <div class="card">
            <div class="card-header center head">
              <strong>Beggar Eason</strong>
            </div>
            <div class="card card-body card-native">

              <div class="alert alert-success">
                <div class="card-img">
                  <img width="80" src="https://q1.qlogo.cn/g?b=qq&nk=77266837&s=100" alt="" />
                  <strong>赠人玫瑰，手有余香</strong>
                </div>
              </div>

              <div class="mt-3">
                <div class="input">
                  <label for="name">
                    <el-icon :size="14">
                      <UserFilled />
                    </el-icon>
                    捐赠者名
                  </label>
                  <input id="name" v-model="params.name" type="text" placeholder="大侠请留姓名" />
                </div>
                <div class="input">
                  <label for="note">
                    <el-icon :size="14">
                      <EditPen />
                    </el-icon>
                    捐赠留言
                  </label>
                  <input id="note" v-model="params.note" type="text" />
                </div>
                <div class="input">
                  <label for="money">
                    <el-icon :size="14">
                      <Money />
                    </el-icon>
                    捐赠金额
                  </label>
                  <input min="0.01" id="money" v-model="params.money" type="number" placeholder="给点呗" />
                </div>
              </div>

              <div class="alert alert-info">
                选择一种方式进行捐赠...
              </div>

              <div class="btn-group" role="group">

                <template v-for="type in this.types">
                  <button @click="donation(type.code)" type="button" :class="type.style">
                    {{ type.name }}
                  </button>
                </template>

              </div>

            </div>
          </div>
        </div>

        <div class="col-md-6">

          <div class="card">
            <div class="card-header head-list center">
              <strong>捐赠者列表</strong>
            </div>

            <div class="card card-body card-native donation-list-body">
              <el-table
                :data="donationList"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="捐赠者名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="note"
                  label="留言"
                  width="210">
                </el-table-column>
                <el-table-column
                  prop="money"
                  label="金额"
                  width="90">
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="createdAt"
                  label="捐赠时间">
                </el-table-column>
              </el-table>

              <el-pagination
                @current-change="handleCurrentChange"
                :page-size="pageInfo.size"
                layout="prev, pager, next"
                :total="pageInfo.total">
              </el-pagination>
            </div>
          </div>

        </div>
      </div>

      <hr>

      <div class="text-center">
        <span class="font-monospace">Made with&nbsp;</span>❤<span class="font-monospace">&nbsp;by <span class="fw-bolder">e4son</span> & <span class="fw-bolder">stephen</span></span>
        <br>
        <span>今日访问数: <span v-text="access.today"></span></span> |
        <span>总访问数: <span v-text="access.all"></span></span>
      </div>

    </div>
  </div>
</template>

<script>
import request from '@/http/request'
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name: 'Index',
  data() {
    return {
      params: {
        name: '匿名',
        note: '我选择不留言',
        money: '1.00',
        type: 'alipay',
      },
      types: [],
      pageLoading: false,
      donationList: [],
      pageInfo: {
        page: 1,
        size: 10,
        total: 0,
      },
      access: {
        today: 0,
        all: 0,
      },
    }
  },
  methods: {
    donation(type) {
      this.params.type = type
      request.donation(this.params).then(response => {
        //获取成功
        //新建页面打开链接
        window.open(response.data.result.url)

        this.pageLoading = true
        let interval = setInterval(() => {
          request.getTradeStatus(response.data.result.tradeNo).then(response => {
            if (response.data.status === 200) {
              this.getList(this.pageInfo.page, this.pageInfo.size)
              clearInterval(interval)
              this.pageLoading = false
              ElMessageBox.alert('感谢大哥的捐赠', '感谢', {
                confirmButtonText: '不谢',
              }).then(() => {
                /*nothing*/
              })
            }
          }).catch(error => {
            if (error.response.data.status !== 201) {
              this.pageLoading = false
              ElMessage.error(error.response.data.message)
            }
          })
        }, 1000)

      }).catch(error => {
        //获取支付连接失败
        ElMessage.error(error.response.data.message)
      })
    },

    getList(page, size) {
      request.getDonationPage(page, size).then(response => {
        this.pageInfo.page = response.data.result.page.current
        this.pageInfo.total = response.data.result.page.total
        this.donationList = response.data.result.page.records
      }).catch(error => {
        console.log(error)
        ElMessage.error('获取捐赠者列表失败')
      })
    },

    handleCurrentChange(newPage) {
      this.pageInfo.page = newPage
      this.getList(this.pageInfo.page, this.pageInfo.size)
    },
  },
  mounted() {
    request.getAccessCount().then(response => {
      this.access.all = response.data.result.all
      this.access.today = response.data.result.today
    })

    //获取支付方式
    request.getTypes().then(response => {
      this.types = response.data.result.types
    }).catch(error => {
      console.log(error)
      ElMessage.error('获取站点名称失败，但问题不大')
    })

    //获取捐赠者
    this.getList(this.pageInfo.page, this.pageInfo.size)
  },
}
</script>

<style scoped>


.card-native {
  border-radius: 0px 0px 5px 5px;
}

.center {
  text-align: center;
}


.head {
  background-image: linear-gradient(to right, #7a88ff, #7affaf);
  /*background: #8cd1a8;*/
}

.head-list {
  background-image: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
}

.card-img > img {
  border-radius: 50%;
  margin: 0 auto;
  display: block;
}

.card-img > strong {
  text-align: center;
  display: block;
  margin-top: 1rem;
}

.input {
  text-align: center;
  width: 100%;
  margin-bottom: 2rem;
}

.input > input {
  width: 70%;
  margin-left: 0.5rem;
  border-top: none;
  border-left: none;
  border-right: none;
  border-width: 1px;
}

.input > input:focus {
  outline: none;
  border-bottom: 2px solid #4994ECFF;
}

.donation-list-body {
  min-height: 33.3rem;
}


</style>
